<!-- src/components/EchartsPie.vue -->
<template>
    <el-card shadow="hover" class="chart-container">
      <div ref="chartRef" :style="{ height: height, width: width }"></div>
    </el-card>
  </template>
  
  <script setup>
  import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
  import * as echarts from 'echarts/core'
  import { TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
  import { PieChart } from 'echarts/charts'
  import { CanvasRenderer } from 'echarts/renderers'
  import { useResizeObserver } from '@vueuse/core'
  
  // 按需注册组件（网页3）
  echarts.use([
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    PieChart,
    CanvasRenderer
  ])
  
  const props = defineProps({
    options: {
      type: Object,
      default: () => ({
        title: '数据分布',
        data: []
      })
    },
    height: {
      type: String,
      default: '400px'
    },
    width: {
      type: String,
      default: '100%'
    }
  })
  
  const chartRef = ref(null)
  let chartInstance = null
  
  // 初始化图表（网页4）
  const initChart = () => {
    if (!chartRef.value) return
    
    chartInstance = echarts.init(chartRef.value)
    updateChart()
  }
  
  // 更新图表配置（网页5）
  const updateChart = () => {
    const baseOptions = {
      title: {
        show: false
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          const formattedTime = formatMinutesToTime(params.value)
          return `${params.seriesName} <br/>${params.name}: ${formattedTime}（${params.percent}%）`
        }
      },
      legend: {
        show: false,
        orient: 'vertical',
        right: 20,
        top: 'middle',
        textStyle: {
          color: '#909399'
        }
      },
      series: [{
        name: '数据分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 6,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: (params) => {
            const formattedTime = formatMinutesToTime(params.value)
            // return `${params.name}\n${formattedTime}`
            return `${params.name}`
        },
          fontSize: 12,
          lineHeight: 14
        },
        labelLine: {
          length: 10,
          length2: 10,
          smooth: true
        },
        data: props.options.data
      }]
    }
    
    chartInstance?.setOption(baseOptions, true)
  }
  
  // 响应式布局（网页3）
  useResizeObserver(chartRef, () => {
    chartInstance?.resize()
  })
  
  onMounted(() => {
    setTimeout(initChart, 100) // 确保DOM渲染完成
  })
  
  onBeforeUnmount(() => {
    chartInstance?.dispose()
  })

  // 新增：分钟转「xx时xx分」的格式化函数
const formatMinutesToTime = (minutes) => {
  const hours = Math.floor(minutes / 60)
  const remainingMinutes = minutes % 60
  return `${hours}时${remainingMinutes}分`
}
  
  watch(() => props.options, () => {
    updateChart()
  }, { deep: true })
  </script>
  
  <style scoped>
  .chart-container {
    margin: 20px;
    background: var(--el-bg-color);
  }

  @media screen and (max-width: 768px) {
    .chart-container {
      margin: 10px;
    }
  }
  </style>